<template>
 <div :class="this.status ? 'shape-wrap' : 'shape-wrap shape-off'">
  <svg class="shape" width="150" height="150" viewBox="0 0 82 82">
   <g fill-rule="nonzero" fill="none">
    <path
     d="M57.442 24.934h3.182a4.376 4.376 0 1 1 0 8.752h-3.182v.634c0 .28-.227.506-.507.506h-1.717a.506.506 0 0 1-.506-.506v-9.89c0-.279.227-.505.506-.505h1.717c.28 0 .507.226.507.506v.503zm-31.884 8.752h-3.182a4.376 4.376 0 0 1 0-8.752h3.182v-.503c0-.28.227-.506.507-.506h1.717c.28 0 .506.226.506.506v9.89c0 .279-.227.505-.506.505h-1.717a.506.506 0 0 1-.507-.506v-.634zM40.677 22h1.784c.56 0 1.013.453 1.013 1.012v13.19c0 .56-.454 1.012-1.013 1.012h-1.784c-.56 0-1.013-.453-1.013-1.012v-13.19c0-.559.454-1.012 1.013-1.012zm18.559 24.654l1.646.883a1.012 1.012 0 0 1 .382 1.427l-7.19 11.569c-.283.453-.869.61-1.34.357l-1.646-.883a1.012 1.012 0 0 1-.38-1.426l7.19-11.569c.282-.453.867-.61 1.338-.358zm-33.996.358l7.191 11.569a1.012 1.012 0 0 1-.381 1.426l-1.647.883a1.012 1.012 0 0 1-1.338-.357l-7.19-11.569a1.012 1.012 0 0 1 .38-1.427l1.647-.883a1.012 1.012 0 0 1 1.338.358z"
     :fill="this.status ? 'rgba(28, 140, 228, 1)' : 'rgba(74, 90, 120, 0.4)'"
     opacity="1"
    ></path>
   </g>
  </svg>
  <span class="title">{{this.dataType?.dataType?.specs[this.status]}}</span>
 </div>
</template>
<script>
export default {
 name: "Socket-Panel",
 props: {
   status: Number,
   dataType: Object
 },
 methods: {},
};
</script>
<style>
.shape-wrap{
 width: 150px;
  height: 150px;
  background: #fff;
  border-radius: 5%;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, 0%);
}
.shape-off {
   background: rgba(255,255,255,0.3);
}
.title {
  color:#fff;
  font-size: 20px;
}
.shape{
 margin-bottom: 20px;
}
</style>
